<!DOCTYPE html>
<html>
	<head>
	  <meta charset="utf-8">
	  <title>Layui</title>
	  <meta name="renderer" content="webkit">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
	  
	  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body >
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>密码修改</legend>
		</fieldset>
		 
		<form class="layui-form" action="" lay-filter="example">
		  <div class="layui-form-item">
		    <label class="layui-form-label">旧密码</label>
		    <div class="layui-input-block" >
		      <input type="text" name="oldPassword" id="oldPassword" lay-verify="title" style="display: inline-block; float: left;" autocomplete="off" placeholder="请输入旧密码"  class="layui-input">
		    <span id='pwdText' style="display: inline-block; text-align: left; padding-top: 8px;"></span>
			
			</div>
			
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">新密码</label>
		    <div class="layui-input-block">
		      <input type="password" name="password" id="newPassword" disabled="disabled" lay-verify="pwd" placeholder="请输入新密码(原密码正确可输入)" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">二次确认</label>
		    <div class="layui-input-block">
		      <input type="password" name="reNewPassword" lay-verify="title" disabled="disabled" id="reNewPassword" autocomplete="off" style="display: inline-block; float: left;" placeholder="请再次输入新密码" class="layui-input">
		    <span id='reNewPwdText' style="display: inline-block; text-align: left; padding-top: 8px;"></span>
			</div>
		  </div>
		
	
		 
		  <div class="layui-form-item">
		    <div class="layui-input-block">
				 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		      <button id="save" onsubmit="updatePwd()" lay-filter="update" type="submit" class="layui-btn" lay-submit="" disabled="disabled" style="cursor: not-allowed" >修改</button>
		    </div>
		  </div>
		</form>
		
		<script src="../layui/layui.js" charset="utf-8"></script>
		<!-- <script type="text/javascript" src="layui/js/jquery-1.8.3.min.js"></script> -->
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
		let value = localStorage.getItem("user");
		var user = JSON.parse(value);
		
		
		layui.use(['form', 'layedit', 'laydate'], function(){
		  var form = layui.form
		  ,isCheck = false
		  ,layer = layui.layer
		  ,$ = layui.jquery
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		  
		  
		  $(function () {
		            
		            //原密码失去焦点
		            $("#oldPassword").blur(function () {
						
		                var oldPassword = $(this).val().trim();
						// alert(oldPassword)
		                if (!oldPassword) {
		                    $('#pwdText').css('color', 'red');
		                    isCheck = false;
		                    return;
		                }
		    
		    
		                //theymeleaf行内表达式
		                // var url = [[@{/user/pwd/}]] + oldPassword;
		                //异步判断密码是否正确
						
		                $.ajax({
		                    url: "http://localhost:8085/users/verifyPwd",
		                    data:{oldPassword : oldPassword,userId:user.userId},
		                    dataType: 'json',
		                    method: 'POST',
		                    success: function (data) {
								if(data.code === 500) {
									$('#save').attr('disabled',true)
									$('#save').css('cursor','not-allowed')
									$("#pwdText").replaceWith("<span id='pwdText' style='color: red; display: inline-block; text-align: left; padding-top: 8px;'>*原密码错误</span>");
									$('#newPassword').attr('disabled',true)
									$('#reNewPassword').attr('disabled',true)
									
									isCheck = false;
								}else {
									$("#pwdText").replaceWith("<span id='pwdText' style='color:green; display:inline-block; text-align: left; padding-top: 8px;'>*原密码正确</span>")
									$('#newPassword').attr('disabled',false)
									$('#reNewPassword').attr('disabled',false)
									$('#save').attr('disabled',false)
									$('#save').attr('style',null)
									isCheck = true;
								}
		                        
		                    }
		    //                 error: function () {
		    //                     $('#pwdText').html("校验原密码异常");
		    //                     isCheck = false;
		    
		    //                 }
		                });
		            });
					$('#save').click(function(){
						if ($("#newPassword").val() && $("#reNewPassword").val()
						    && $("#newPassword").val() == $("#reNewPassword").val()) {
								
													$.post({
														url: 'http://localhost:8085/users/updateNewPwd',
														data: {newPassword:$("#newPassword").val(),userId:user.userId},
														dataType:"json",
														timeout:300000,
														success:function(result) {
															console.log(result);
																if(result.code === 200) {
																	layer.msg("修改成功",{time: 1000},function(){
																	  location.reload();
																
																	});
																}
														}
													});
													
													return false;
													
											   
									        
									        
									    // });
									
								} else {
								    $("#reNewPwdText").replaceWith("<span id='reNewPwdText' style='color:red;display: inline-block; text-align: left; padding-top: 8px;'>*两次密码不一致!</span>");
								    return false;
								}
					});
					
		         
		  });
		  
		 

		  //自定义验证规则
		    
				form.verify({
				  title: function(value){
				    if(value.length < 1){
				      return '此栏不能为空噢';
				    }
				  }
				  ,pwd: [
				    /^[\S]{6,12}$/
				    ,'密码必须6到12位，且不能出现空格'
				  ]
				  
				});
			 
		  
		  
		  //表单取值
		  layui.$('#LAY-component-form-getval').on('click', function(){
		    var data = form.val('example');
		    alert(JSON.stringify(data));
		  });
		  
		});
		</script>
		<style>
		
		.layui-input{
			width:35%
		}
		
				
		
		
		
		</style>
	</body>
</html>



